<template>
    <div :class="`detail-select-area ${mode}`">
        <SelectCell label="已选" @click="selectSku">{{ selectSkuText }}</SelectCell>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { SelectCell } from '@components/shop';
import ChooseGoods from '../components/ChooseGoods';
import ModeMixin from '@common/mixin';
export default {
    name: 'SelectArea', // 选择区域
    mixins: [ModeMixin],
    components: {
        SelectCell,
        ChooseGoods,
    },
    computed: {
        ...mapState({
            selectSkuInfo: state => state.detail.selectSkuInfo,
        }),
        selectSkuText() {
            return this.selectSkuInfo ? this.selectSkuInfo.name : '未选择';
        },
    },
    data() {
        return {
            selectSkuValue: '',
        };
    },
    methods: {
        selectSku() {
            this.$emit('selectSku');
        },
    },
};
</script>

<style lang="less">
.detail-select-area {
    .m-v(@shop-gap-md);
    .p-v(@gap);
    background-color: @white;
}
</style>
